<template>
  <div class="login" ref="this_login">
    <span class="bigtitle">博客</span>
    <span class="smalltitle">欢迎回来，我们想念你！</span>
    <div class="form-input">
      <input type="text" v-model="formdata.username" placeholder="用户名" />
      <input type="password" v-model="formdata.password" placeholder="密码" />
    </div>
    <div class="function">
      <div style="display: flex; align-items: center">
        <input type="checkbox" name="checkbox" style="margin: 0.0966rem" />
        <label for="checkbox">记住我</label>
      </div>

      <span style="color: rgb(5, 86, 205)" @click="router.push('/register')"
        >没有账号？</span
      >
    </div>
    <!-- <input type="button" value="登录" class="gologin"> -->
    <button
      class="gologin"
      :disabled="lodding"
      @click="gologin"
      :style="{ opacity: !lodding ? 1 : 0.5 }"
    >
      <span class="loader" v-if="lodding"></span
      >{{ lodding ? "登录中" : "登录" }}
    </button>
    <span style="color: red; text-align: center">{{ errormsg }}</span>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { goLogin } from "@/api/index.js";
const route = useRoute();
const router = useRouter();
// 加载动画
let lodding = ref(false);
let this_login = ref();
const formdata = reactive({
  username: "",
  password: "",
});
let errormsg = ref("");
const gologin = async () => {
  lodding.value = true;
  let res = await goLogin(formdata.username, formdata.password);
  console.log(res);
  if (res.status == 200) {
    // 登录成功
    /*
    将个人信息存储到缓存，然后跳转页面
    */
    // localStorage.setItem("token",res.data.token);
    localStorage.setItem("userInfo", JSON.stringify(res.data));
    router.push({ path: "/account" });
  } else {
    // 失败
    errormsg.value = res.data;
    lodding.value = false;
    setTimeout(() => {
      errormsg.value = "";
    }, 2000);
  }
};

onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
});
</script>
<style scoped lang="css">
.login {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  transform: translateY(-15%);
}

.form-input {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

input {
  border: 0;
  background-color: rgb(249, 249, 250);
  border-radius: 0.4415rem;
  padding: 0.3831rem;
  margin: 0 0.7246rem;
}

input[type="text"] {
  margin-bottom: 0.3623rem;
}

input::placeholder {
  color: rgb(179, 180, 191);
}

.function {
  display: flex;
  justify-content: space-between;
  padding: 0 0.7246rem;
}

.bigtitle {
  text-align: center;
  font-size: 0.6039rem;
}

.smalltitle {
  text-align: center;
  color: rgb(179, 180, 191);
  margin-top: 0.4831rem;
}

.gologin {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 82, 204);
  color: #fff;
  margin-top: 0.4831rem;
  border: 0;
  border-radius: 0.4415rem;
  padding: 0.2831rem;
  margin: 0.3623rem 0.7246rem;
}

.loader {
  display: inline-block;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: 0.1932rem;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
